import React, { useState, useEffect } from 'react';
import { View, Text, ScrollView, Image, StyleSheet, TouchableOpacity, TouchableHighlight } from 'react-native';
import { router } from 'expo-router';
import FoundHeaderTab from './found/foundHeaderTab';
import FoundItem from './found/foundDate'
import { ThemedView } from '@/components/ThemedView';
import ParallaxScrollView from '@/components/ParallaxScrollView';


const renderItem = (item: any) => (
    // 详情页跳转
    <TouchableOpacity onPress={() => router.navigate({
        pathname: '/homeTag/(articleDetails)/articleDetails',
        params: {
            id: item.id,
        }
    })}>
        <ThemedView>
            <Image source={{ uri: item.imageUrl }} style={styles.containerImg} />
            {/* <Text>{item.title}</Text> */}
            <Text>{item.description}</Text>
            <Text>{item.author}</Text>
            <Text>{item.likes} </Text>
            <Text>{item.comments} </Text>
        </ThemedView>
    </TouchableOpacity>
);


export default function found() {
    return (
        <View>
            {/* 筛选关注内容 */}
            <FoundHeaderTab />
            <ScrollView>
                <View style={styles.containerList}>
                    {FoundItem.map((item) => (
                        <View key={item.id} style={styles.containerListPage}>
                            {renderItem(item)}
                        </View>
                    ))}
                </View>
                <View style={styles.containerListBai}></View>
            </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
    // 实现瀑布流布局
    containerList: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        padding: 2,
    },
    containerListPage: {
        width: '49%',
        backgroundColor: '#fff',
        marginBottom: 10,
        borderRadius: 10,
    },
    containerListBai: {
        height: 90,
    },
    containerImg: {
        // 超出隐藏
        overflow: 'hidden',
        borderRadius: 10,
        height: 200,
        width: '100%',
    }
})
